<template>
  <div>
    <u-cell-group :border="false">
      <cus-cell
        title="文字"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('text')
        "
      >
        <div>
          <u--textarea
            class="u-slot-value"
            count
            autoHeight
            placeholder="请输入按钮文字"
            v-model="editConfigCom.attribute.text"
            maxlength="20"
          ></u--textarea>
        </div>
      </cus-cell>
      <cus-cell title="按钮颜色" :border="false">
        <view
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('type')
          "
        >
          <u-radio-group
            v-model="editConfigCom.attribute.type"
            style="flex-wrap: wrap"
            :activeColor="$theme.themeColor.primary"
          >
            <u-radio
              :customStyle="{ marginLeft: '8px', marginTop: '10px' }"
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.name"
              :name="item.value"
              size="1rem"
            >
            </u-radio>
          </u-radio-group>
        </view>
      </cus-cell>
      <navigate-base-config />
    </u-cell-group>
  </div>
</template>

<script>
export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      typeOptions: [
        {
          name: "跟随主题色",
          value: "primary",
        },
        {
          name: "绿色",
          value: "success",
        },
        {
          name: "白色",
          value: "info",
        },
        {
          name: "橙色",
          value: "warning",
        },
        {
          name: "红色",
          value: "error",
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
::v-deep.u-textarea {
  width: 400px !important;
}
</style>
